<template>
  <main class="contact-page" role="main">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-10">
          <div class="page-header">
            <h1 class="page-title">联系我们</h1>
            <p class="page-subtitle">我们很乐意听到您的声音，无论是建议、合作还是技术讨论</p>
          </div>

          <div class="row g-4">
            <div class="col-md-8">
              <div class="contact-form-section">
                <h2>发送消息</h2>
                <form class="contact-form">
                  <div class="row g-3">
                    <div class="col-md-6">
                      <label for="name" class="form-label">姓名 *</label>
                      <input id="name" type="text" class="form-control" required />
                    </div>
                    <div class="col-md-6">
                      <label for="email" class="form-label">邮箱 *</label>
                      <input id="email" type="email" class="form-control" required />
                    </div>
                  </div>
                  <div class="mb-3">
                    <label for="subject" class="form-label">主题</label>
                    <input id="subject" type="text" class="form-control" />
                  </div>
                  <div class="mb-3">
                    <label for="message" class="form-label">消息内容 *</label>
                    <textarea id="message" class="form-control" rows="6" required></textarea>
                  </div>
                  <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fa fa-paper-plane"></i>
                    发送消息
                  </button>
                </form>
              </div>
            </div>

            <div class="col-md-4">
              <div class="contact-info">
                <h2>联系信息</h2>

                <div class="contact-item">
                  <div class="contact-icon">
                    <i class="fa fa-envelope"></i>
                  </div>
                  <div class="contact-details">
                    <h4>邮箱地址</h4>
                    <p>903580396@qq.com</p>
                  </div>
                </div>

                <div class="contact-item">
                  <div class="contact-icon">
                    <i class="fa fa-clock-o"></i>
                  </div>
                  <div class="contact-details">
                    <h4>回复时间</h4>
                    <p>我们会在24小时内回复您的消息</p>
                  </div>
                </div>

                <div class="contact-item">
                  <div class="contact-icon">
                    <i class="fa fa-comments"></i>
                  </div>
                  <div class="contact-details">
                    <h4>技术讨论</h4>
                    <p>欢迎与我们讨论技术问题和分享经验</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="faq-section">
            <h2>常见问题</h2>
            <div class="row g-4">
              <div class="col-md-6">
                <div class="faq-item">
                  <h4>如何投稿？</h4>
                  <p>
                    我们欢迎高质量的原创技术文章投稿。请通过邮箱联系我们，并附上您的文章大纲或样稿。
                  </p>
                </div>
                <div class="faq-item">
                  <h4>是否接受转载？</h4>
                  <p>
                    我们主要发布原创内容，但对于优质的技术翻译文章，我们也会考虑。请确保获得原作者授权。
                  </p>
                </div>
              </div>
              <div class="col-md-6">
                <div class="faq-item">
                  <h4>技术合作</h4>
                  <p>我们乐意与技术团队、开源项目等进行合作交流。请详细说明合作意向和方式。</p>
                </div>
                <div class="faq-item">
                  <h4>广告合作</h4>
                  <p>我们提供多种广告合作形式，包括内容营销、产品推广等。请联系我们了解详情。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { setSEO } from "@/utils/seo";

// 设置联系页面SEO
onMounted(() => {
  setSEO({
    title: "联系我们",
    description: "联系数知笔记团队 - 我们很乐意听到您的声音，无论是建议、合作还是技术讨论。欢迎投稿、技术合作和意见反馈。",
    keywords: "联系我们,技术合作,文章投稿,意见反馈,技术讨论,数知笔记",
    canonicalUrl: window.location.origin + "/contact",
  });
});
</script>

<style lang="scss" scoped>
.contact-page {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 40px 0;

  .page-header {
    text-align: center;
    margin-bottom: 50px;

    .page-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 15px;
    }

    .page-subtitle {
      font-size: 1.1rem;
      color: #6c757d;
      max-width: 600px;
      margin: 0 auto;
    }
  }

  .contact-form-section {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;

    h2 {
      font-size: 1.8rem;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 30px;
      padding-bottom: 10px;
      border-bottom: 3px solid #3498db;
    }

    .form-label {
      font-weight: 600;
      color: #495057;
      margin-bottom: 8px;
    }

    .form-control {
      border: 2px solid #e9ecef;
      border-radius: 8px;
      padding: 12px 15px;
      font-size: 1rem;
      transition: all 0.3s ease;

      &:focus {
        border-color: #3498db;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
      }
    }

    .btn-primary {
      background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
      border: none;
      border-radius: 10px;
      padding: 12px 30px;
      font-weight: 600;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
      }

      i {
        margin-right: 8px;
      }
    }
  }

  .contact-info {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    height: fit-content;

    h2 {
      font-size: 1.8rem;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 30px;
      padding-bottom: 10px;
      border-bottom: 3px solid #3498db;
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 25px;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 10px;
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-2px);
      }

      .contact-icon {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        i {
          color: white;
          font-size: 1.2rem;
        }
      }

      .contact-details {
        h4 {
          font-size: 1.1rem;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 5px;
        }

        p {
          color: #6c757d;
          margin: 0;
          line-height: 1.5;
        }
      }
    }

    .social-links {
      margin-top: 40px;
      text-align: center;

      h3 {
        font-size: 1.3rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 20px;
      }

      .social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;

        .social-link {
          width: 45px;
          height: 45px;
          background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 1.2rem;
          text-decoration: none;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
          }
        }
      }
    }
  }

  .faq-section {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin-top: 30px;

    h2 {
      font-size: 1.8rem;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 30px;
      text-align: center;
      padding-bottom: 10px;
      border-bottom: 3px solid #3498db;
    }

    .faq-item {
      padding: 20px;
      background: #f8f9fa;
      border-radius: 10px;
      margin-bottom: 20px;
      border-left: 4px solid #3498db;

      h4 {
        font-size: 1.2rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 10px;
      }

      p {
        color: #6c757d;
        margin: 0;
        line-height: 1.6;
      }
    }
  }

  @media (max-width: 768px) {
    .contact-form-section,
    .contact-info,
    .faq-section {
      padding: 20px;
    }

    .page-header .page-title {
      font-size: 2rem;
    }
  }
}
</style>
